<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网上超市</title>
    <style>
        body{font-family:Arial,Helvetica,sans-serif;background:#f5f5f5;margin:0;padding:0}
        header{background:#ff6f00;color:#fff;padding:20px;text-align:center}
        .products{display:flex;flex-wrap:wrap;justify-content:center;padding:20px}
        .product{background:#fff;border:1px solid #ddd;border-radius:8px;margin:10px;padding:15px;width:200px;text-align:center}
        .product img{max-width:100%;height:auto;border-radius:4px}
        .price{color:#e91e63;font-weight:bold}
        button{background:#ff6f00;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer}
        button:hover{background:#e65100}
    </style>
</head>
<body>
<header>
    <h1>欢迎光临网上超市</h1>
</header>
<section class="products">
    <div class="product">
        <img src="https://via.placeholder.com/200x150?text=苹果" alt="苹果">
        <h3>红富士苹果</h3>
        <p class="price">¥5.99/斤</p>
        <button>加入购物车</button>
    </div>
    <div class="product">
        <img src="https://via.placeholder.com/200x150?text=牛奶" alt="牛奶">
        <h3>纯牛奶1L</h3>
        <p class="price">¥8.90</p>
        <button>加入购物车</button>
    </div>
    <div class="product">
        <img src="https://via.placeholder.com/200x150?text=面包" alt="面包">
        <h3>全麦吐司</h3>
        <p class="price">¥6.50</p>
        <button>加入购物车</button>
    </div>
</section>
</body>
</html>